<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<script type="text/javascript"
	src="${ctx}/static/FusionCharts/JSClass/FusionCharts.js"></script>
<link rel="stylesheet"
	href="${ctx}/static/FusionCharts/Contents/Style.css" type="text/css" />
	
<script type="text/javascript">
	$(document).ready(function() {
		updateChart();
		updateTable(0);
	});
	function updateChart() {
		var dateScope = $("input[name='date-radio']:checked").val();
		var dataScope = $("input[name='data-radio']:checked").val();
		var date = $('#Date').val();
	
		$.post(_ctx + "/stat/task_chart_data.do", {
			dateScope : dateScope,
			dataScope : dataScope, 
			date : date
		}, function(resp) {
			if (resp.status == '1') {
				var myChart = new FusionCharts(
						"${ctx}/static/FusionCharts/Charts/MSBar2D.swf?ChartNoDataText=该日期无统计记录！",
						"test", "100%", "100%");
				myChart.setDataXML(resp.data);
				myChart.render("chartdiv");
				window.parent.setIframeHeight(window.parent.document
						.getElementById('content'));
			} else {
				parent.ui.msg(resp.msg, 0);
			}
		});
	
	}

	function changeDateFomat() {

		var type = $("input[name='date-radio']:checked").val();
		var date;

		if (type == '0') {
			date = $('#hidden_day').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},c:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'})");
		} else if (type == '1') {
			date = $('#hidden_month').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M-{%d-1}'})");
		} else {
			date = $('#hidden_year').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y-%M-{%d-1}'})");
		}

		$('#Date').val(date);
	}
	
	function changeDateFomat2() {

		var type = $("input[name='table_date_radio']:checked").val();
		var date;

		if (type == '0') {
			date = $('#hidden_day').val();
			$('#table_date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},c:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'})");
		} else if (type == '1') {
			date = $('#hidden_month').val();
			$('#table_date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M-{%d-1}'})");
		} else {
			date = $('#hidden_year').val();
			$('#table_date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y-%M-{%d-1}'})");
		}

		$('#table_date').val(date);
	}
	
	function updateTable(offset) {
		var dateScope = $("input[name='table_date_radio']:checked").val();
		var date = $('#table_date').val();
	
		$.ajax({
			type : "POST",
			dataType : "html",
			cache : false,
			url : _ctx + "/stat/get_state_table.do",
			data : {
				dateScope : dateScope,
				date : date,
				offSet:offset
			},
			success : function(content) {
				$('#table_div').html(content);
			},
			error : function() {
				parent.ui.msg('信息加载错误', 0);
			}
		}).done(function(){
			$(".active .page").next().addClass("active page");
			alert($(".active .page").next().html());
			//$(".active .page")[0].removeClass("");
		});
	}

</script>

</head>
<style type="text/css">
th {
	word-break: keep-all;
	white-space: nowrap;
}
</style>
<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页</li>
						<li class="active">综合统计</li>
						<li class="active">任务同步情况统计</li>
					</ul>
				</div>

				<div class="page-content">
					<div class="tabbable">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active" listType="0"><a data-toggle="tab"
								href="#chart_view"> 任务同步情况统计 </a></li>

							<li listType="1"><a data-toggle="tab" href="#table_view">表格查看
							</a></li>
						</ul>

						<div class="tab-content" id="myTabContent">
							<div id="chart_view" class="tab-pane in active">

								<div class="widget-box " style="margin-bottom:0px;">
									<div class="widget-header widget-header-flat">
										<h5 class="smaller lighter">
											<i class="icon-list"></i> &nbsp;
										</h5>
										<div class="widget-toolbar no-border">
											<button class="btn btn-xs btn-primary" onclick="updateChart()">
												统计</button>
											&nbsp;&nbsp;&nbsp; <span>统计类型 &nbsp;:</span> <label>
												<input id="bm" name="data-radio" type="radio" value="0" checked
												onchange="updateChart()" /> <span>频次&nbsp;&nbsp;</span>
											</label> <label> <input id="bm" name="data-radio" type="radio"
												value="1" onchange="updateChart()" /> <span>数据量&nbsp;&nbsp;</span>
											</label>
										</div>

										<div class="widget-toolbar no-border">
											<%
											Calendar cal = Calendar.getInstance();
											cal.add(Calendar.DATE, -1);
											String date = new SimpleDateFormat("yyyy-MM-dd").format(cal
													.getTime());
											String month = new SimpleDateFormat("yyyy-MM")
													.format(cal.getTime());
											String year = new SimpleDateFormat("yyyy").format(cal.getTime());
										%>

											<input type="hidden" name="day" id="hidden_day" 
												value="<%=date%>"> <input type="hidden" name="month"
												id="hidden_month" value="<%=month%>"> <input
												type="hidden" name="year" id="hidden_year" value="<%=year%>">



											<span class="input-icon input-icon-right width-100"> <input
												type="text" class="form-control form-input" id="Date"
												name="start_date" value="<%=date%> " style="margin-top:3px;"
												onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'});" />
												<i class="icon-calendar blue pointer" style="margin-top:6px;"
												onclick="javascript:$('#Date').focus();"></i>
											</span>
										</div>
										<div class="widget-toolbar no-border">
											<span>选择时间 :</span>
										</div>
										<div class="widget-toolbar no-border">
											<label> <input name="date-radio" type="radio"
												value="0" id="date" checked="checked"
												onclick="changeDateFomat();" /> <span>日</span>
											</label>
										</div>
										<div class="widget-toolbar no-border">
											<label> <input name="date-radio" type="radio"
												value="1" id="month" onclick="changeDateFomat();" /> <span>月</span>
											</label>
										</div>
										<div class="widget-toolbar no-border">
											<label> <input name="date-radio" type="radio"
												value="2" id="year" onclick="changeDateFomat();" /> <span>年</span>
											</label>
										</div>
										<div class="widget-toolbar no-border">
											<span>选择周期 &nbsp;:</span>
										</div>
										<!-- </div> -->

										<!-- <a href="#" data-action="collapse">
										<i class="icon-chevron-up"></i>
									</a>
 -->
									</div>
								</div>

								<div class="widget-body" style="border: none;">
									<div class="widget-main" style="padding:0;">
										<div id="chartdiv" align="center" style="height: 450px;">FusionCharts
											加载失败，请刷新重试！</div>
									</div>
								</div>


							</div>

							<div id="table_view" class="tab-pane">
							
								<div class="widget-box">
									<!-- <form id="searchForm" class="form-search"  onsubmit="return search(this)"> -->
										<div class="widget-header widget-header-flat">
											<h5 class="smaller lighter">
												<i class="icon-list"></i> &nbsp;
											</h5>
											<div class="widget-toolbar no-border" >
														<button class="btn btn-xs btn-primary" onclick="updateTable(0);">
															统计</button>&nbsp;&nbsp;&nbsp;
														
											</div>
											<div class="widget-toolbar no-border">
													
													<div class="widget-toolbar no-border">
													<input type="hidden" name="day" id="hidden_day"
														value="<%=date%>"> <input type="hidden" name="month"
														id="hidden_month" value="<%=month%>"> <input
														type="hidden" name="year" id="hidden_year" value="<%=year%>">
			
			
			
													<span class="input-icon input-icon-right width-100"> <input
														type="text" class="form-control form-input" id="table_date"
														name="statDate" value="<%=date%> "
														onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'});" />
														<i class="icon-calendar blue pointer"
														onclick="javascript:$('#Date').focus();"></i> </span>
												</div>
												<div class="widget-toolbar no-border">
													<span>选择时间 :</span>											
												</div>
												<div class="widget-toolbar no-border">
													<label> <input name="table_date_radio" type="radio"
														value="0" id="date" checked="checked"
														onclick="changeDateFomat2();" /> <span>日</span> </label>
												</div>
												<div class="widget-toolbar no-border">
													<label> <input name="table_date_radio" type="radio"
														value="1" id="month" onclick="changeDateFomat2();" /> <span>月</span>
													</label>
												</div>
												<div class="widget-toolbar no-border">
													<label> <input name="table_date_radio" type="radio"
														value="2" id="year" onclick="changeDateFomat2();" /> <span>年</span>
													</label>
												</div>
												<div class="widget-toolbar no-border">
													<span>选择周期 &nbsp;:</span>				
												</div>
											</div>
																												
											</div>
											<!-- </form> -->
										</div>
										
										<div class="hr hr12 hr-dotted"></div>
										
										<div id="table_div" class="table-responsive">
											
											
										</div>
										
							
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>
